<template>
    <div className='canvas'>
        <div @drop="drop" @dragover="dragover" :style="{ width: '100%', height: '750px', }" id="canvas_box">


            <canvas id="myCanvas" :width="store.canvasInfo.x" :height="store.canvasInfo.y"></canvas>


            <!-- 中间拖动内容 -->
            <div v-for="(item, index) in toolStore.componentsList" :key="index" v-drag="item.id"
                :style="{ ...stylePx(item.style), zIndex: item.index, position: 'absolute' }" :id="item.id"
                @click="selectItem(item.id)" @contextmenu="showMenu($event, item.id)">
                <!-- 动态组件 -->
                <component :is="item.component" :propLable="item.propLable" :style="item.style" :index="item.index"
                    :id="item.id" />
            </div>

            <div v-show="menuFlag" class="abs" :style="{ ...stylePx(menuStyle) }">
                <!-- 右击菜单 -->
                <RightMenu :id="rightId" @offlag="offlag" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { watch, reactive, onMounted, nextTick, ref } from 'vue';
import { userCanvasStore, userToolbarStore } from '../../store/index'
import RightMenu from './RightMenu.vue'
import { stylePx } from '../../utils';

// 默认不显示
const menuFlag = ref(false)
const rightId = ref('1111')

const menuStyle = reactive({
    left: 0,
    top: 0
})

// 鼠标🖱右击
const showMenu = (event, id) => {
    event.preventDefault()
    menuFlag.value = true
    menuStyle.left = event.clientX - 250
    menuStyle.top = event.clientY - 80
    rightId.value = id
}

const offlag = () => {
    menuFlag.value = false;
}


const store = userCanvasStore()
const toolStore = userToolbarStore()
// console.log(store.canvasInfo)

// 当前 canvas 的 0 0 坐标，我们设置 canvas 左上角顶点为 0 0，向右👉和向下👇是 X Y 轴正方向，0，0 为 pageSlicePos 初始值
let pageSlicePos = reactive({
    x: 0,
    y: 0,
});
let ctxVal = reactive(null); // canvas 的 ctx
let scale = reactive(1); // 缩放比例
let solidColor = reactive('#CCCCCC70'); // 实线颜色
let dashedColor = reactive('#CCCCCC25'); // 虚线颜色

// 监听 pageSlicePos 数据，有变动则进行 canvas 的绘制 
watch(store.canvasInfo, () => {
    if (ctxVal) {
        // 重新绘制之前清空 canvas
        ctxVal.clearRect(0, 0, ctxVal.canvas.width, ctxVal.canvas.height);
    }
    nextTick(() => {
        // console.log(ctxVal)
        drawLineGrid()
    })
})

onMounted(() => {
    drawLineGrid();
})

// 拖动到指定元素触发
const drop = (event) => {
    // console.log(event)
    // console.log('结束', event.dataTransfer.getData("index"))

    const index = event.dataTransfer.getData("index")
    // console.log(toolStore.componentsData[index])
    const itemCom = JSON.parse(JSON.stringify(toolStore.componentsData[index]))
    itemCom.style.top = event.clientY - 100;
    itemCom.style.left = event.clientX - 400;
    itemCom.id = String(Math.random()).slice(3, 13)
    // 层级区分

    toolStore.addItemCom(itemCom)
    // toolStore.changeToolItem()
    toolStore.selectItem(itemCom.id)

}

// 结束拖动
const dragover = (event) => {
    event.preventDefault();
}

// 选中元素查看属性
const selectItem = (id) => {
    toolStore.selectItem(id)
}

/**
 * 绘制网格
 * @param scaleVal 缩放倍数
 */
const drawLineGrid = (scaleVal = scale) => {
    /*获取元素*/
    var myCanvas = document.querySelector('#myCanvas');
    myCanvas.style.background = '#fff'
    /*获取绘图工具*/
    var ctx = ctxVal || myCanvas.getContext('2d');
    ctxVal = ctx;
    // 设置网格大小
    var girdSize = 5 * scaleVal;

    // 获取Canvas的width、height
    var CanvasWidth = ctx.canvas.width;
    var CanvasHeight = ctx.canvas.height;


    const canvasXHeight = CanvasHeight - pageSlicePos.y;
    const canvasYWidth = CanvasWidth - pageSlicePos.x;
    // 从 pageSlicePos.y 处开始往 Y 轴正方向画 X 轴网格
    const xPageSliceTotal = Math.ceil(canvasXHeight / girdSize);
    for (let i = 0; i < xPageSliceTotal; i++) {
        ctx.beginPath(); // 开启路径，设置不同的样式
        ctx.moveTo(0, pageSlicePos.y + girdSize * i);
        ctx.lineTo(CanvasWidth, pageSlicePos.y + girdSize * i);
        ctx.strokeStyle = i === 0 ? solidColor : (i % 5 === 0 ? solidColor : dashedColor); // 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
        ctx.stroke();
    }

    // 从 pageSlicePos.y 处开始往 Y 轴负方向画 X 轴网格
    const xRemaining = pageSlicePos.y;
    const xRemainingTotal = Math.ceil(xRemaining / girdSize);
    for (let i = 0; i < xRemainingTotal; i++) {
        if (i === 0) continue;
        ctx.beginPath(); // 开启路径，设置不同的样式
        ctx.moveTo(0, pageSlicePos.y - girdSize * i); // -0.5是为了解决像素模糊问题
        ctx.lineTo(CanvasWidth, pageSlicePos.y - girdSize * i);
        ctx.strokeStyle = i === 0 ? solidColor : (i % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
        ctx.stroke();
    }

    // 从 pageSlicePos.x 处开始往 X 轴正方向画 Y 轴网格
    const yPageSliceTotal = Math.ceil(canvasYWidth / girdSize); // 计算需要绘画y轴的条数
    for (let j = 0; j < yPageSliceTotal; j++) {
        ctx.beginPath(); // 开启路径，设置不同的样式
        ctx.moveTo(pageSlicePos.x + girdSize * j, 0);
        ctx.lineTo(pageSlicePos.x + girdSize * j, CanvasHeight);
        ctx.strokeStyle = j === 0 ? solidColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
        ctx.stroke();
    }

    // 从 pageSlicePos.x 处开始往 X 轴负方向画 Y 轴网格
    const yRemaining = pageSlicePos.x;
    const yRemainingTotal = Math.ceil(yRemaining / girdSize);
    for (let j = 0; j < yRemainingTotal; j++) {
        if (j === 0) continue;
        ctx.beginPath(); // 开启路径，设置不同的样式
        ctx.moveTo(pageSlicePos.x - girdSize * j, 0);
        ctx.lineTo(pageSlicePos.x - girdSize * j, CanvasHeight);
        ctx.strokeStyle = j === 0 ? solidColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
        ctx.stroke();
    }
};




</script>

<style scoped>
#myCanvas {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.canvas {
    height: 100%;
}

#canvas_box {
    width: 980px;
    height: 760px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>